 <template>
  <div id="sum_earnings" style="height:4rem;padding-bottom:.4rem"></div>
</template>
<script type="text/ecmascript-6">
import echarts from 'echarts'
import { getpricetrendchartdata } from "../api/price.js";
export default {
  data() {
    return {
      json: {}
    };
  },
  methods: {
    //写在methods方法里面封装然后在，在mounted()里面调用个人比较喜欢这种的写法，方便封装
    drawLine(name) {
      // 绘制图表
      const optionData = {
        xAxis: {
          type: "category",
          data: this.json.x,
          nameLocation: "start",
           axisTick: {
            show: false
          },
          axisLabel: {
            rotate: -60,
            textStyle: {
              fontSize: 10
            }
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          min: function(value) {
               let min =value.min *0.98 
              return min.toFixed(2);
          },
          max: function(value) {
             let max =value.max *1.02
              return max.toFixed(2);
          },
          axisLine: {
            show: false
          },
          scale: true,
          axisLabel: {
            textStyle: {
              fontSize: 10
            }
          },
          gridLineWidth: 0 //隐藏y轴刻度线
        },
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0]
          }
        ],
        grid: {
          x: 50,
          y: 30,
          x2: 15,
          y2: 40
        },

        series: [
          {
            data: this.json.y,
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: new  echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#1F87E5"
                  },
                  {
                    offset: 1,
                    color: "#ffffff"
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#1F87E5",
                  width: 1
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false
          }
        ]
      };
      name.setOption(optionData);
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例 写在 mounted（）里面
      let sum_earnings =  echarts.init(
        document.getElementById("sum_earnings")
      );
      this.drawLine(sum_earnings);
    },
    getpricetrendchartdata() {
      let obj = this.$route.query;
      getpricetrendchartdata(obj).then(res => {
        this.json = res.data;
        this.draw();
      });
    }
  },
  mounted() {
    this.getpricetrendchartdata();
  }
};
</script>

 